<template>
  <page-header-wrapper>
    <div class='container'>
      <a-card :bordered='false'>
        <a-row type='flex' justify='space-between'>
          <div class='title'>antdv表单</div>
          <a-space>
            <a-button type='primary' @click='handleSubmit'>保存</a-button>
          </a-space>
        </a-row>
        <a-divider />
        <a-form
          id='components-form-demo-validate-other'
          :form='form'
          v-bind='formItemLayout'
          @submit='handleSubmit'
        >
          <a-form-item label='Plain Text'>
            <span class='ant-form-text'>
              China
            </span>
          </a-form-item>
          <a-form-item label='Select' has-feedback>
            <a-select
              v-decorator="[
                'select',
                { rules: [{ required: true, message: 'Please select your country!' }] },
              ]"
              placeholder='Please select a country'
              :options='[{key:"china",title:"China"},{key:"usa",title:"U.S.A"}]'
            />
          </a-form-item>

          <a-form-item label='Select[multiple]'>
            <a-select
              v-decorator="[
                'select-multiple',
                {
                  rules: [
                    { required: true, message: 'Please select your favourite colors!', type: 'array' },
                  ],
                },
              ]"
              :options='[{key:"red",title:"Red"},{key:"green",title:"Green"},{key:"blue",title:"Blue"}]'
              mode='multiple'
              placeholder='Please select favourite colors'
            />
          </a-form-item>

          <a-form-item label='InputNumber'>
            <a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min='1' :max='10' />
            <span class='ant-form-text'>
              machines
            </span>
          </a-form-item>

          <a-form-item label='Switch'>
            <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
          </a-form-item>

          <a-form-item label='testSwitch' v-show="form.getFieldValue('switch')===true">
            <a-input-number v-decorator="['checkNumber']" :min='1' :max='100' />
            <span class='ant-form-text'>
              machines
            </span>
          </a-form-item>

          <a-form-item label='Slider'>
            <a-slider
              v-decorator="['slider']"
              :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
            />
          </a-form-item>

          <a-form-item label='Radio.Group'>
            <a-radio-group
              v-decorator="['radio-group']"
              :options="[{label:'item 1',value:'a'},{label:'item 2',value:'b'},{label:'item 3',value:'c'}]"
            />
          </a-form-item>

          <a-form-item label='Radio.Button'>
            <a-radio-group v-decorator="['radio-button']">
              <a-radio-button value='a'>
                item 1
              </a-radio-button>
              <a-radio-button value='b'>
                item 2
              </a-radio-button>
              <a-radio-button value='c'>
                item 3
              </a-radio-button>
            </a-radio-group>
          </a-form-item>

          <a-form-item label='Checkbox.Group'>
            <a-checkbox-group
              v-decorator="['checkbox-group', { initialValue: ['A', 'B'] }]"
              style='width: 100%;'
            >
              <a-row>
                <a-col :span='8'>
                  <a-checkbox value='A'>
                    A
                  </a-checkbox>
                </a-col>
                <a-col :span='8'>
                  <a-checkbox disabled value='B'>
                    B
                  </a-checkbox>
                </a-col>
                <a-col :span='8'>
                  <a-checkbox value='C'>
                    C
                  </a-checkbox>
                </a-col>
                <a-col :span='8'>
                  <a-checkbox value='D'>
                    D
                  </a-checkbox>
                </a-col>
                <a-col :span='8'>
                  <a-checkbox value='E'>
                    E
                  </a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>

          <a-form-item label='Rate'>
            <a-rate v-decorator="['rate', { initialValue: 3.5 }]" allow-half />
          </a-form-item>

          <a-form-item label='Upload' extra='longgggggggggggggggggggggggggggggggggg'>
            <a-upload
              v-decorator="[
                'upload',
                {
                  valuePropName: 'fileList',
                  getValueFromEvent: normFile,
                },
              ]"
              name='logo'
              action='/upload.do'
              list-type='picture'
            >
              <a-button>
                <a-icon type='upload' />
                Click to upload
              </a-button>
            </a-upload>
          </a-form-item>

          <a-form-item label='Dragger'>
            <div class='dropbox'>
              <a-upload-dragger
                v-decorator="[
                  'dragger',
                  {
                    valuePropName: 'fileList',
                    getValueFromEvent: normFile,
                  },
                ]"
                name='files'
                action='/upload.do'
              >
                <p class='ant-upload-drag-icon'>
                  <a-icon type='inbox' />
                </p>
                <p class='ant-upload-text'>
                  Click or drag file to this area to upload
                </p>
                <p class='ant-upload-hint'>
                  Support for a single or bulk upload.
                </p>
              </a-upload-dragger>
            </div>
          </a-form-item>

          <a-form-item
            v-for="(k, index) in form.getFieldValue('keys')"
            :key="k"
            v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
            :label="index === 0 ? 'Passengers' : ''"
            :required="false"
          >
            <a-input
              v-decorator="[
                `names[${k}]`,
                {
                  validateTrigger: ['change', 'blur'],
                  rules: [
                    {
                      required: true,
                      whitespace: true,
                      message: 'Please input passenger\'s name or delete this field.',
                    },
                  ],
                },
              ]"
              placeholder="passenger name"
              style="width: 60%; margin-right: 8px"
            />
            <a-icon
              v-if="form.getFieldValue('keys').length > 1"
              class="dynamic-delete-button"
              type="minus-circle-o"
              :disabled="form.getFieldValue('keys').length === 1"
              @click="() => remove(k)"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayoutWithOutLabel">
            <a-button type="dashed" style="width: 60%" @click="add">
              <a-icon type="plus" /> Add field
            </a-button>
          </a-form-item>

          <a-form-item :wrapper-col='{ span: 12, offset: 6 }'>
            <a-button type='primary' html-type='submit'>
              Submit
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
export default {
  name: 'AntdvForm',
  components: {},
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: { span: 14,offset: 6  }
      },
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {
      name: 'validate_other',
      onValuesChange: (props, values)=>{
        console.log('valuesChange',props, values)
        if(values.hasOwnProperty('switch') && (values['switch']===false)){
          this.form.resetFields(['checkNumber'])
        }
      }
    })
    this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
  },
  created() {
    this.$nextTick(() => {
      this.form.setFieldsValue({
        switch: true,
        checkNumber:'88',
        keys:[0]
      })
    })
  },
  computed: {},
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    normFile(e) {
      console.log('Upload event:', e)
      if (Array.isArray(e)) {
        return e
      }
      return e && e.fileList
    },
    remove(k) {
      const { form } = this;
      // can use data-binding to get
      const keys = form.getFieldValue('keys');
      // We need at least one passenger
      if (keys.length === 1) {
        return;
      }

      // can use data-binding to set
      form.setFieldsValue({
        keys: keys.filter(key => key !== k),
      });
    },

    add() {
      const { form } = this;
      // can use data-binding to get
      const keys = form.getFieldValue('keys');
      const nextKeys = keys.concat(keys.length);
      // can use data-binding to set
      // important! notify form to detect changes
      form.setFieldsValue({
        keys: nextKeys,
      });
    },
  },
  watch: {}
}
</script>

<style lang='less' scoped>
.container {
  .title {
    font-size: 18px;
    font-weight: bold;
  }
}


</style>

